@font - face

Internet Explorer

Netscape

Opera

Safari

Firefox

6.0

7.0

8.0

8.0

9.0

8.0

9.2

9.5

1.3

2.0

3.1

1.5

2.0

3.0

Частково

Частково

Частково

Ні

Ні

Ні

Ні

Ні

Ні

Ні

Так

Ні

Ні

Ні

Коротка інформація

CSS

CSS2, CSS3

Значення за умовчанням

Ні

Посилання на специфікацію

http://www.w 3.org/TR/CSS2/fonts.html#font - descriptions

Опис

Правило @font - face дозволяє визначити налаштування шрифтів, а також завантажити специфічний шрифт на комп'ютер користувача.

Синтаксис

@font - face { параметри шрифту }

Значення

Усередині конструкції @font - face може знаходитися набір властивостей для зміни параметрів шрифту (font - family, font - size, font - style та ін.), а також посилання на шрифтовій файл. Посилання записується у вигляді src: url(URI), де URI - відносний або абсолютний шлях до файлу.

Приклад

HTML 4.01CSS 2.1IE 6IE 7IE 8Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">

<html>

  <head>

    <title>@font - face</title>

    <meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">

    <style type="text/css">

      @font - face {

        font - family: Pompadur; /* Ім'я шрифту */

        src: url(fonts/pompadur.ttf); /* Шлях до файлу з шрифтом */

      }

      P {

        font - family: Pompadur;

      }

    </style>

  </head>

  <body>

    <p>Протяжність варіює дорийский мікрохроматичний інтервал,

          але якби пісень було раз в п'ять менше, було б краще для усіх.</p>

  </body>

</html>

Результат цього прикладу показаний на мал. 1.

Мал. 1. Власний шрифт на сторінці

Браузери

Браузер Internet Explorer до сьомої версії включно підтримує тільки шрифти формату EOT (Embedded OpenType).